Skins give the Portal© user the ability to alter their login screen to just about any configuration imaginable. The screen designs can be as varied as anyone's imagination and are relatively easy to make. Whether you make your own or use ones that others have made, skins add a wonderful, personal touch to your copy of Portal©.
Also, be sure to check out GameAxle's homepage every now and then for skin information and for skins you can download. After you have gained some practice making them, you can even submit yours for others to enjoy.
Whenever you get a new skin, just place the skin files in their own directory under the Portal\skins\ directory. As an example, if you used the default installation configuration, and wanted to install a skin you downloaded called "blue" simply create the directory C:\Program Files\Portal\skins\blue\ and place all the files into that directory. For any skin, there should be a config.txt file and a handful of *.bmp image files. Once you do this, Portal© can then recognize the new skin and you can access it for use as described below.
Portal© Skin Screen Elements
Before we get into the elements themselves, you need to know how to get to this screen. You can reach it by right clicking on the login screen and selecting Load Portal Skin from the popup menu that appears.
Available Skins
This list displays the currently available skins. All skins with their own directory and valid config.txt file under the Portal\skins\ directory will appear in this list.
Description
Provides a brief description of the skin and other information such as creator, creation date, etc.
Select Skin Button
Applies
the currently selected skin to the login screen
Cancel Button
Closes the screen without selecting a new skin
Creating a Portal© Skin
A Portal © "skin" is basically a few files the define the overall look of the login screen. Each skin resides in its own directory below the \skins directory just below the installed Portal© root directory (e.g. C:\Program Files\Portal\skins\original\). The skin consists of the basic configuration file (config.txt) and the supporting image files. The config.txt file is basically the instruction set that tells Portal© what to do with all the images, buttons and other controls on the login screen. Using these tools, anyone can create their own unique look for Portal©. Remember, as you tweak around with a skin currently loaded into Portal©, when you refresh the skin (via right-clicking or hitting Ctrl+R on the login screen), it'll take the latest values from the config.txt and image files. This means you can make a change in the config.txt, save it, come over to Portal and hit Ctrl+R on the login screen and it'll load up the new values. It makes it super easy to fine-tune your skins.
The only items absolutely required to create the skin are the background image, the profiles grid and the exit button. For reasons of usability though, we highly recommend that you use all the available buttons.
Below we'll talk about putting together the basic config.txt file. To really dig deep into creating a skin, copy an existing setup (config.txt files and various images) to another skin directory and change them as you see fit. This is by far the quickest and easiest way to develop your own skin.
Image File Format
All images MUST be in bitmap (.bmp) format. Also, to keep memory concerns to a minimum, they should have a palette no larger than 256 colors. It's
quite fine to edit in Photoshop (or whatever paint program you like) at full color (16 million) but when you save the final file make sure you
reduce the palette to 256 (or less!)
The best way to learn what looks good is by experimentation.
Parameter Values
When a parameter is listed, it is followed with the expected kind of value. int = integer, str = string, bool = boolean (true or false).
Note: The "live" parameter lines in this file must be on ONE single line. Parameters can be enclosed in quotes or not. Parameter values with
spaces in them (such as file or font names) must be enclosed in quotes.
Colors
When asked for a color, you can specify either by the integer RGB value of the color or use the standard windows colors as a string.
Color strings: black, maroon, green, olive, navy, purple, teal, silver gray, red, lime, yellow, blue, fuchsia, aqua, white
If you choose to specific the color as an RGB value, you need to use a 4-byte hexadecimal number. The low three bytes represent RGB color intensities for blue, green, and red, respectively. The value $00FF0000 represents full-intensity, pure blue, $0000FF00 is pure green, and $000000FF is pure red. $00000000 is black and $00FFFFFF is white.
If the highest-order byte is zero ($00), the color obtained is the closest matching color in the system palette. If the highest-order byte is one ($01), the color obtained is the closest matching color in the currently realized palette. If the highest-order byte is two ($02), the value is matched with the nearest color in the logical palette of the current device context.
Captions
When asked for a caption for a button, you can use the & symbol immediately before a letter to create an Alt-shortcut. These are the shortcuts you use to hold the Alt key down and press the letter to press the button from the keyboard. Ok, in English that means that you can have "Login &Online" as the caption and it'll appear as "Login Online" on the screen. Then, when you are running the program and hit Alt+O, you will effectively be clicking that button as if you did it with the mouse. You can only have one shortcut for each caption. If you wish to have the & symbol appear in the caption as a character, use it twice (e.g. "Load && Run" will appear as "Load & Run").
Image Filenames
When asked for an image filename, give the name of the file without the path to that file (e.g. button.bmp). This file must be located
in the directory below the \skins directory that is the same as the name of the .cfg file. This means that if you're using the
scotts_cool_skin.cfg file, the image files for that skin must reside in the \skins\scotts_cool_skin\ directory.
Description
All lines in the config.txt file that begin with ! (as you can see below) will appear in the description for the skin when a user tries to load it. The description should include basic information about the skin such as creator info and anything else you think would be cool for a user to know.
All lines in the description must begin with ! (though the ! will not appear when the description is displayed in Portal©
Example:
!This is the original skin for the Portal© installation
!located in <Portal directory>\skins\original
!
!Please refer to the config.txt file in that directory
!to learn how to make your own customized skin
!
!Be sure to check out http://www.gameaxle.com for
!support and download of submitted skins
Background Image Setup
Format: BACKGROUND: FILE=str TCOLOR=int/str
FILE - File containing the image for the background
TCOLOR - Specify, or the color of the lower-left pixel is used
This is what appears on the very background of the login screen.
At its base, the image file loaded must be rectangular, but can be of any size (it is suggested to keep it under 400 pixels high and
620 pixels wide).
If you do not specify a transparent color, the color of the pixel at the far lower-left of the bitmap will be set as the transparent color. This means that wherever this color appears in the image, it will be see-through. Using this feature can create all kinds of shapes and effects for the login screen, even though the image file loaded is rectangular.
Example Background Format:
BACKGROUND: FILE="background.bmp" TCOLOR=fuchsia
Profiles Grid Setup
Format: GRID: LEFT=int TOP=int HEIGHT=int WIDTH=int COLOR=int/str WCOLOR=int/str FONT=str FSIZE=int FCOLOR=int/str FBOLD=bool FITALIC=bool TFONT=str TSIZE=int TCOLOR=int/str TBOLD=bool TITALIC=bool PTITLE=sring MTITLE=string PWIDTH=int MWIDTH=int
LEFT/TOP - Pixel placement from the upper-left corner
HEIGHT/WIDTH - Size of the grid
COLOR - Color of the grid header bar
WCOLOR - Color of the background of the grid
FONT - Name of the grid font
FSIZE - Size of the grid font
FCOLOR - Color of the grid font
FBOLD - True/false to display the grid font in boldface
FITALIC - True/false to display the grid font in italics
TFONT - Name of the grid title font
TSIZE - Size of the grid title font
TCOLOR - Color of the grid title font
TBOLD - True/false to display the grid title font in boldface
TITALIC - True/false to display the grid title font in italics
PTITLE - Title caption for the Player field
MTITLE - Title caption for the MUD field
PWIDTH - Character width (not pixels) of the Player field
MWIDTH - Character width (not pixels) of the MUD field
Be aware that when setting the font name the font must be on the end user's computer, otherwise it will come up as MS Sans Serif or some such default crap. Choose common fonts such as Arial, Times New Roman and Courier New and you should be fine.
Example Grid Format:
GRID: LEFT=26 TOP=151 HEIGHT=77 WIDTH=282 COLOR=blue WCOLOR=white FONT="arial" FSIZE=8 FCOLOR=black FBOLD=true FITALIC=false TFONT="arial" TSIZE=8 TCOLOR=white TBOLD=true TITALIC=false PTITLE="Player" MTITLE="MUD" PWIDTH=20 MWIDTH=22
Buttons Setup
Format:
BUTTON NAME: LEFT=int TOP=int FILE=string
TCOLOR=int/str CAPTION=str FONT=str FSIZE=int FCOLOR=int/str FBOLD=bool FITALIC=bool
FXOFFSET=integer FYOFFSET=integer FOCOLOR=int/str
LEFT/TOP - Pixel placement from the upper-left corner
FILE - File containing the image for the button
TCOLOR - Color value that appears transparent
CAPTION - Text that appears on the button
FONT - Name of the font to display on the button (e.g. Arial)
FSIZE - Size of the caption font (e.g. 8, 10, 12)
FCOLOR - Color of the caption font
FBOLD - True/false to display the caption in boldface
FITALIC - True/false to display the caption in italics
FXOFFSET - X (horizontal) offset of the caption =can be negative)
FYOFFSET - Y (vertical) offset of the caption =can be negative)
FOCOLOR - Color to outline the caption with =optional)
If you leave the space after the colon (:) blank for any button, that button will not appear on the screen. It is suggested that you leave all buttons listed below even if you don't use them all.
Example Button Formats:
LICENSE : LEFT=343 TOP=92 FILE="licensebutton.bmp" TCOLOR=white CAPTION="View Software License Agreement" FONT=Arial FSIZE=10 FCOLOR=white FBOLD=true FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
PROFILES : LEFT=330 TOP=142 FILE="profilesbutton.bmp" TCOLOR=white CAPTION="Player Profiles" FONT="Arial" FSIZE=10 FCOLOR=white FBOLD=true FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
WIZARD : LEFT=462 TOP=142 FILE="wizardbutton.bmp" TCOLOR=white CAPTION="Profile Wizard" FONT="Arial" FSIZE=10 FCOLOR=white FBOLD=true FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
ONLINE : LEFT=24 TOP=250 FILE="onlinebutton.bmp" TCOLOR=white CAPTION="Login Online" FONT="Arial" FSIZE=10 FCOLOR=white FBOLD=true FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
QUICK : LEFT=160 TOP=250 FILE="quickbutton.bmp" TCOLOR=lime CAPTION="Quick Connect" FONT="Arial" FSIZE=10 FCOLOR=white FBOLD=true FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
OFFLINE : LEFT=296 TOP=250 FILE="offlinebutton.bmp" TCOLOR=white CAPTION="Work Offline" FONT="Arial" FSIZE=10 FCOLOR=white FBOLD=true FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
HELP : LEFT=454 TOP=205 FILE="helpbutton.bmp" TCOLOR=white CAPTION="Portal© ?" FONT="Arial" FSIZE=10 FCOLOR=white FBOLD=true FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
GAMING : LEFT=526 TOP=205 FILE="gamingbutton.bmp" TCOLOR=white CAPTION="Gaming ?" FONT="Arial" FSIZE=10 FCOLOR=white FBOLD=true FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
PASSWORDS : LEFT=454 TOP=226 FILE="passwordsbutton.bmp" TCOLOR=white CAPTION="Clear Passwords" FONT=Arial FSIZE=10 FCOLOR=true FBOLD=false FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
EXIT : LEFT=454 TOP=253 FILE="exitbutton.bmp" TCOLOR=white CAPTION="Exit Portal©" FONT=Arial FSIZE=10 FCOLOR=white FBOLD=true FITALIC=false FXOFFSET=0 FYOFFSET=0 FOCOLOR=navy
Connection Panel Setup
Format: CONNECTION: LEFT=int TOP=int CENTERED=bool FILE=str TCOLOR=int/str CAPTION=str FONT=str FSIZE=int FCOLOR=int/str FBOLD=bool FITALIC=bool FXOFFSET=integer FYOFFSET=integer FOCOLOR=int/str
LEFT/TOP - Pixel placement from the upper-left corner
CENTERED - True/False center the panel on the login screen
(If the panel is centered, Left/Top are unused)
FILE - File containing the image for the panel (65h x 230w)
TCOLOR - Color value that appears transparent
CAPTION - Text that appears on the panel
FONT - Name of the font to display on the panel (e.g. Arial)
FSIZE - Size of the caption font
FCOLOR - Color of the caption font
FBOLD - True/false to display the caption in boldface
FITALIC - True/false to display the caption in italics
FXOFFSET - X (horizontal) offset of the caption (can be negative)
FYOFFSET - Y (vertical) offset of the caption (can be negative)
FOCOLOR - Color to outline the caption with (required)
The connection panel appears momentarily when Portal© is seeking out an
open socket to connect through. Use Ctrl+C to toggle manual viewing of the
panel. This is very useful when designing a skin using it.
Example
Connection Panel Format:
CONNECTION: LEFT=0 TOP=0 CENTERED=true FILE="connection.bmp" TCOLOR=fuchsia CAPTION="Connecting..." CAPTION="Times New Roman" FSIZE=18 FCOLOR=white FBOLD=true FITALIC=true FXOFFSET=-30 FYOFFSET=3 FOCOLOR=navy